<template>
	<view class="page" :style="swiperIndex==1? 'background-color:#63A8B1' : 'background-color:#B2A787'">
		<view class='distribution-posters' style="height: calc(100vh + 50px);">
			<!-- <div class='title'>
				<h3>{{cardInfo.enterprise.name}}</h3>
				<p>CHENGDUYILIMINGPIAN</p> -->
			<!-- </div> -->
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:circular="circular" :duration="duration" @change="bindchange" previous-margin="40rpx"
				next-margin="20rpx">
				<swiper-item style="" class="aaa" ref="swiper_1">
					<canvas style="width: 325px; height: 550px;margin: 0 auto;" canvas-id="myCanvas" id="myCanvas"> </canvas>
				</swiper-item>
				<swiper-item style="" class="aaa">
					<canvas style="width: 325px; height: 550px;margin: 0 auto;" canvas-id="myCanvas1" id="myCanvas1"> </canvas>
					<!-- <view class="swiper-item uni-bg-red box_2">
						<image :src="bgimg2"></image>
						<image :src="bgimg3"></image>
						<image :src="bgimg4"></image>
						<view class="text">
							<view>{{cardInfo.nickname}}</view>
							<view>{{cardInfo.position_name}}</view>
						</view>
						<view class="telList">
							<view>
								<image :src="if4"></image>
								<span>{{cardInfo.phone}}</span>
							</view>
							<view>
								<image :src="if5"></image>
								<span>{{cardInfo.enterprise.address}}</span>
							</view>
							<view>
								<image :src="if6"></image>
								<span>{{cardInfo.email}}</span>
							</view>
						</view>
						<view class="msg">
							<view>{{cardInfo.autograph}}</view>
							<image :src="oerwm"></image>
							<view>我也要制作名片</view>
						</view>
					</view> -->
				</swiper-item>
			</swiper>
			<!-- #ifndef H5  -->
			<!-- <div class="odiv" @click='savePosterPathMp(posterImage[swiperIndex])'>
				<image :src="imgHost + '/index/pyq.png'" mode=""></image>
				<view>保存海报</view>
			</div> -->
			<div class="odiv" @click='saveImage'>
				<image :src="imgHost + '/index/pyq.png'" mode=""></image>
				<view>保存海报</view>
			</div>
			<!-- #endif -->
			<!-- #ifndef MP || APP-PLUS -->
			<div class="preserve acea-row row-center-wrapper">
				<div class="line"></div>
				<div class="tip">长按保存图片</div>
				<div class="line"></div>
			</div>
			<!-- #endif -->
		</view>
		<!-- <XQ-GeneratePoster ref="draw" /> -->
		<view class="qrimg">
			<zb-code ref="qrcode" :show="codeShow" :cid="cid" :val="val" :size="size" :unit="unit"
				:background="background" :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize"
				:onval="onval" :loadMake="loadMake" @result="qrR" />
		</view>
	</view>
</template>

<script>
	import {
		cardpost,
		mister,
		carduser
	} from '@/api/userminp.js'
	import {
		getUserInfo,
		spreadBanner,
		userShare,
		routineCode,
		spreadMsg,
		imgToBase
	} from '@/api/user.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import {
		TOKENNAME,
		HTTP_REQUEST_URL
	} from '@/config/app.js';
	import colors from '@/mixins/color.js';
	export default {
		mixins: [colors],
		data() {
			return {
				// 卡片1背景图
				bgimg1:HTTP_REQUEST_URL + '/mingpian/buss/74578342f8ff4331208813cd621eb79e.png',
				if1:HTTP_REQUEST_URL +"/mingpian/buss/073043576255f3d878688f148493891b.png",
				if2:HTTP_REQUEST_URL +"/mingpian/buss/afa3e7dd7cd12ff7170b7849130678f1.png",
				if3:HTTP_REQUEST_URL +"/mingpian/buss/45ec0164ba5fe873ed170d9d71633370.png",
				// 卡片2背景图
				bgimg2:HTTP_REQUEST_URL+"/mingpian/buss/aadd07fa21c8e75fa060a511b22e442b.png",
				bgimg3:HTTP_REQUEST_URL+"/mingpian/buss/f442de1c404a0a505786bf17b4b02fd3.png",
				bgimg4:HTTP_REQUEST_URL+"/mingpian/buss/bd26a59d804212ee5602c8426334384c.png",
				if4:HTTP_REQUEST_URL+"/mingpian/buss/dac8196e62133d07b10d89f63a1e4b81.png",
				if5:HTTP_REQUEST_URL+"/mingpian/buss/a0951bda9185c41ac0fe56159ef3c6cb.png",
				if6:HTTP_REQUEST_URL+"/mingpian/buss/918b79045b5ca789e6adf9116dfbb6f7.png",
				// 名片信息
				cardInfo:null,
				imgHost: HTTP_REQUEST_URL + '/mingpian',
				imgUrls: [],
				indicatorDots: false,
				posterImageStatus: true,
				circular: false,
				autoplay: false,
				interval: 3000,
				duration: 500,
				swiperIndex: 0,
				spreadList: [],
				userInfo: {},
				poster: '',
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				spreadData: [{}], //新海报数据
				nickName: "",
				siteName: "",
				mpUrl: "",
				canvasImageUrl: '',
				posterImage: [],
				//二维码参数
				codeShow: false,
				cid: '1',
				ifShow: true,
				val: "", // 要生成的二维码值
				size: 200, // 二维码大小
				unit: 'upx', // 单位
				background: '#FFF', // 背景色
				foreground: '#000', // 前景色
				pdground: '#000', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '', // 二维码生成后的图片地址或base64
				codeSrc: "",
				wd: 0,
				hg: 0,
				qrcode: "",
				oerwm: '',
				shareId: '',
                gsname:''
			};
		},
		computed: mapGetters({
			'isLogin': 'isLogin',
			'userData': 'userInfo',
			'uid': 'uid'
		}),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						this.userSpreadBannerList();
					}
				},
				deep: true
			},
			userData: {
				handler: function(newV, oldV) {
					if (newV) {
						this.$set(this, 'userInfo', newV);
					}
				},
				deep: true
			},
			// 监听swiper显示下标
			swiperIndex:{
				handler:function(newV,oldV){ 
					console.log(newV)
					if(newV){
						if(newV==1){
							uni.setNavigationBarColor({
								 frontColor:'#ffffff',
								 backgroundColor:'#63A8B1'
							})
						}
					}else{
						uni.setNavigationBarColor({
							 frontColor:'#ffffff',
							 backgroundColor:'#B2A787'
						})
					}
				},
				deep:true
			},
			"oerwm":function(news,old){
				if(news){
					this.generatePoster()
					this.generatePoster1()
				}
			}
		},
		async onLoad(e) {
			this.shareId = e.share
            this.gsname=e.name
		}, 
		async onReady() {
			if (this.isLogin) {
				this.val = `${HTTP_REQUEST_URL}?spread=${this.uid}`
				// #ifdef MP
				// await this.spreadMsg()
				// await this.cardpost()
				// #endif
				getUserInfo().then(res => {
					this.userInfo = res.data
				})
			} else {
				toLogin();
			}
		},
		onShow() {
			this.$nextTick(() => {
				let selector = uni.createSelectorQuery().select('.aaa');
				selector.fields({
					size: true
				}, data => {
					this.wd = data.width
					this.hg = data.height
				}).exec();
			})
			// 获取名片信息
			carduser({
			     share_uid: this.shareId
			}).then((res)=>{
				this.cardInfo=res.data
				// console.log(res)
			})
			// 生成二维码
			this.getmister()
		},
		/**
		 * 用户点击右上角分享
		 */
		// #ifdef MP
		onShareAppMessage() {
			return {
				title: this.userInfo.nickname + '-分销海报',
				imageUrl: this.spreadList[0],
				path: '/pages/index/minp?share_uid=' + this.userInfo.uid,
			};
		},
		onShareTimeline(){
			return {
				title: this.userInfo.nickname + '-分销海报',
				imageUrl: this.spreadList[0],
				path: '/pages/index/minp?share_uid=' + this.userInfo.uid,
			};
		},
		// #endif
		methods: {
			// 生成海报2
			async generatePoster1(){
				console.log(this.cardInfo)
				var that = this;
				
				var ctx = uni.createCanvasContext('myCanvas1')
				ctx.clearRect(0, 0, 0, 0);
					
				var w = 325;
				var h = 550;
				var bg1 = this.bgimg2;
				var bg2 = this.if4;
				var bg3 = this.if5;
				var bg4 = this.if6;
				var bg5 = this.oerwm;
				var bg6 = this.bgimg3;
				var bg7 = this.bgimg4;
				
				bg1 = await that.fileStoreImage(bg1)
				bg2 = await that.fileStoreImage(bg2)
				bg3 = await that.fileStoreImage(bg3)
				bg4 = await that.fileStoreImage(bg4)
				bg5 = await that.fileStoreImage(bg5)
				bg6 = await that.fileStoreImage(this.cardInfo.avatar)
				bg7 = await that.fileStoreImage(bg7)
				
				ctx.drawImage(bg1, 0, 0, w, h);
				ctx.save();
				
				ctx.arc(290, 154, 165, 0 * Math.PI, 2 * Math.PI);
				ctx.save()
				ctx.clip();
				ctx.drawImage(bg6, 120, 0, 330, 330);
				ctx.restore()
				
				ctx.drawImage(bg7, 0, 0, w,h);
				ctx.save();
				
				
				ctx.setFontSize(20);
				ctx.setFillStyle("#ffffff");
				ctx.fillText(this.userInfo.nickname,50,108)
				if(this.userInfo.enterprise_id!=0){
					ctx.setFontSize(12);
					ctx.setFillStyle("#ffffff");
					ctx.fillText(this.userInfo.position_name,50,138)
				}
				
				ctx.drawImage(bg2, 50, 170);
				ctx.setFontSize(12);
				ctx.setFillStyle("#ffffff");
				ctx.fillText(this.userInfo.phone,65,180)
				
				if(this.userInfo.enterprise_id!=0){
					ctx.drawImage(bg3, 50, 200);
					ctx.setFontSize(12);
					ctx.setFillStyle("#ffffff");
					
					if(this.cardInfo.enterprise.address.length>18){
						ctx.fillText(this.cardInfo.enterprise.address.slice(0,18),65,210)
						ctx.fillText(this.cardInfo.enterprise.address.slice(18,this.cardInfo.enterprise.address.length),65,223)
					}else{
						ctx.fillText(this.cardInfo.enterprise.address,65,210)
					}
				}
				
				ctx.drawImage(bg4, 50, 230);
				ctx.setFontSize(12);
				ctx.setFillStyle("#ffffff");
				ctx.fillText(this.userInfo.email,65,240)
				
				ctx.setFontSize(12);
				ctx.setFillStyle("#ffffff");
				ctx.textAlign = 'center';
				// 需要居中的字体宽度要设置为画布的一半
				var str1 = this.userInfo.autograph;
				if(str1.length >= 44){
					ctx.fillText(str1.slice(0,22),162.5,315)
					ctx.fillText(str1.slice(22,44),162.5,335)
					ctx.fillText(str1.slice(44,66),162.5,355)
				}else if(str1.length >= 22){
					ctx.fillText(str1.slice(0,22),162.5,335)
					ctx.fillText(str1.slice(22,44),162.5,355)
				}else{
					ctx.fillText(str1,162.5,355)
				}
				
				ctx.setFontSize(14);
				ctx.setFillStyle("#ffffff");
				ctx.textAlign = 'center';
				ctx.fillText('我也要制作名片',162.5,480)
				
				// 圆的中心x y 半径 起始点 结束点 （弧度）
				ctx.arc(162.5, 410, 40, 0 * Math.PI, 2 * Math.PI);
				ctx.clip();
				ctx.drawImage(bg5, 122.5, 370, 80, 80);
				
				// ctx.arc(200, 410, 80, 0 * Math.PI, 2 * Math.PI);
				// ctx.clip();
				// ctx.drawImage(bg6, 138, -20, 160,160);
				// ctx.save();
				
				ctx.save();
				// ctx.draw();
				ctx.draw(true,(ret)=>{
					
					uni.canvasToTempFilePath({ // 保存canvas为图片
						canvasId: 'myCanvas1',
						quality: 1,
						complete: function(res) {
							// 在H5平台下，tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败，APP端正常输出临时路径
							console.log(res.tempFilePath)								
							uni.setStorageSync('filePath1',res.tempFilePath)  //保存临时文件路径到缓存
						} ,
					})
				})
			},
			// 生成海报1
			async generatePoster(){
				var that = this;
				
				var ctx = uni.createCanvasContext('myCanvas')
				ctx.clearRect(0, 0, 0, 0);
					
				var w = 325;
				var h = 550;
				var bg1 = this.bgimg1;
				var bg2 = this.if1;
				var bg3 = this.if2;
				var bg4 = this.if3;
				var bg5 = this.oerwm;
				
				bg1 = await that.fileStoreImage(bg1)
				bg2 = await that.fileStoreImage(bg2)
				bg3 = await that.fileStoreImage(bg3)
				bg4 = await that.fileStoreImage(bg4)
				bg5 = await that.fileStoreImage(bg5)
				
				ctx.drawImage(bg1, 0, 0, w, h);
				ctx.save();
				
				ctx.setFontSize(20);
				ctx.setFillStyle("#7F724C");
				ctx.fillText(this.userInfo.nickname,50,108)
				
				if(this.userInfo.enterprise_id!=0){
					ctx.setFontSize(12);
					ctx.setFillStyle("#A49C87");
					ctx.fillText(this.userInfo.position_name,50,138)
				}
				
				ctx.drawImage(bg2, 50, 170);
				ctx.setFontSize(12);
				ctx.setFillStyle("#A49C87");
				ctx.fillText(this.userInfo.phone,65,180)
				
				if(this.userInfo.enterprise_id!=0){
					ctx.drawImage(bg3, 50, 200);
					ctx.setFontSize(12);
					ctx.setFillStyle("#A49C87");
					
					if(this.cardInfo.enterprise.address.length>18){
						ctx.fillText(this.cardInfo.enterprise.address.slice(0,18),65,210)
						ctx.fillText(this.cardInfo.enterprise.address.slice(18,this.cardInfo.enterprise.address.length),65,223)
					}else{
						ctx.fillText(this.cardInfo.enterprise.address,65,210)
					}
				}
				
				ctx.drawImage(bg4, 50, 230);
				ctx.setFontSize(12);
				ctx.setFillStyle("#A49C87");
				ctx.fillText(this.userInfo.email,65,240)
				
				ctx.setFontSize(12);
				ctx.setFillStyle("#A49C87");
				ctx.textAlign = 'center';
				// 需要居中的字体宽度要设置为画布的一半
				var str1 = this.userInfo.autograph;
				if(str1.length >= 44){
					ctx.fillText(str1.slice(0,22),162.5,315)
					ctx.fillText(str1.slice(22,44),162.5,335)
					ctx.fillText(str1.slice(44,66),162.5,355)
				}else if(str1.length >= 22){
					ctx.fillText(str1.slice(0,22),162.5,335)
					ctx.fillText(str1.slice(22,44),162.5,355)
				}else{
					ctx.fillText(str1,162.5,355)
				}
				
				
				ctx.setFontSize(14);
				ctx.setFillStyle("#000000");
				ctx.textAlign = 'center';
				ctx.fillText('我也要制作名片',162.5,480)
				
				// 圆的中心x y 半径 起始点 结束点 （弧度）
				ctx.arc(162.5, 410, 40, 0 * Math.PI, 2 * Math.PI);
				ctx.clip();
				ctx.drawImage(bg5, 122.5, 370, 80, 80);
				
				ctx.save();
				// ctx.draw();
				ctx.draw(true,(ret)=>{
					
					uni.canvasToTempFilePath({ // 保存canvas为图片
						canvasId: 'myCanvas',
						quality: 1,
						complete: function(res) {
							// 在H5平台下，tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败，APP端正常输出临时路径
							console.log(res.tempFilePath)								
							uni.setStorageSync('filePath',res.tempFilePath)  //保存临时文件路径到缓存
						} ,
					})
				})
			},
			//图片转符合安全域名路径
			fileStoreImage(url) {
				// #ifdef MP  || APP-PLUS
				let ishttps = url.split('//')[0] == 'https:'
				if (!ishttps) {
					url = 'https://'+url.split('//')[1]
				}
				// #endif
				return new Promise((resolve, reject) => {
					let that = this;
					uni.downloadFile({
						url: url,
						success: function(res) {
							resolve(res.tempFilePath);
						},
						fail: function() {
							return that.$util.Tips({
								title: ''
							});
						}
					});
				})
			},
			// 保存图片到相册
			saveImage() {
				let filePath;
				if(this.swiperIndex==0){
					filePath = uni.getStorageSync('filePath')	//从缓存中读取临时文件路径			
				}else{
					filePath = uni.getStorageSync('filePath1')	//从缓存中读取临时文件路径			
				}
				wx.saveImageToPhotosAlbum({
					filePath: filePath,
					success(res) {
						uni.showToast({
							icon:'success',
							mask:true,
							title: '保存到相册了',
						});
					},
					fail(res) {
						console.log(res.errMsg)
					}
				})
			},
			// 生成二维码
			getmister() {
				mister({
					params: `share_uid=` + this.shareId,
					path: 'pages/index/minp',
					type: 'share',
					share_uid: this.shareId,
				},).then((res) => {
					console.log(res.data,'sss')
					this.oerwm = res.data.qrcode_url
				})
			},
			async qrR(res) {
				this.codeSrc = await res
				// #ifdef H5 || APP-PLUS
				// this.spreadMsg()
				// this.cardpost()
				// #endif
			},
			// 获取图片
			// async cardpost() {
			// 	let res = await cardpost()
			// 	console.log(res ,"res")
			// 	this.spreadData = [res.data]
			// 	uni.showLoading({
			// 		title: '海报生成中',
			// 		mask: true
			// 	});
			// 	for (let i = 0; i < 2; i++) {
			// 		let that = this
			// 		// #ifdef H5
			// 		let phone = await this.imgToBase(HTTP_REQUEST_URL+'/mingpian/business/phone.png');
			// 		let dinwei = await this.imgToBase(HTTP_REQUEST_URL+'/mingpian/business/dinwei.png');
			// 		let emlice = await this.imgToBase(HTTP_REQUEST_URL+'/mingpian/business/emlice.png');
			// 		let xuexiao = await this.imgToBase('https://znmp.ysxtcn.cn/uniimage/xuexiao.png');
			// 		let box = await this.imgToBase(HTTP_REQUEST_URL+'/mingpian/business/box.png');
			// 		let box2 = await this.imgToBase(HTTP_REQUEST_URL+'/mingpian/business/box2.png');
			// 		// let binjin = await this.imgToBase('https://znmp.ysxtcn.cn/uniimage/binjin.png');
			// 		let beijing = await this.imgToBase(HTTP_REQUEST_URL+'/mingpian/business/two.png');
			// 		let beijing2 = await this.imgToBase(HTTP_REQUEST_URL+'/mingpian/business/theng.png');
			// 		let erwm = await this.imgToBase(this.oerwm);
			// 		let avatar = await this.imgToBase(res.data.avatar);
			// 		// #endif
			// 		// #ifdef MP

			// 		let phone = await this.downloadFilestoreImage(
			// 			HTTP_REQUEST_URL+'/mingpian/business/phone.png');
			// 		let dinwei = await this.downloadFilestoreImage(
			// 			HTTP_REQUEST_URL+'/mingpian/business/dinwei.png');
			// 		let emlice = await this.downloadFilestoreImage(
			// 			HTTP_REQUEST_URL+'/mingpian/business/emlice.png');
			// 		let xuexiao = await this.downloadFilestoreImage(
			// 			'https://znmp.ysxtcn.cn/uniimage/xuexiao.png');
			// 		let box = await this.downloadFilestoreImage(HTTP_REQUEST_URL+'/mingpian/business/box.png');
			// 		let box2 = await this.downloadFilestoreImage(HTTP_REQUEST_URL+'/mingpian/business/box2.png');
                         
                         
			// 		// let binjin = await this.downloadFilestoreImage(
			// 		// 	'https://znmp.ysxtcn.cn/uniimage/binjin.png');
                              
                              
			// 		let beijing = await this.downloadFilestoreImage(
			// 			HTTP_REQUEST_URL+'/mingpian/business/two.png');
			// 		let beijing2 = await this.downloadFilestoreImage(
			// 			HTTP_REQUEST_URL+'/mingpian/business/theng.png');
			// 		let erwm = await this.downloadFilestoreImage(this.oerwm);
			// 		// 二维码
			// 		let avatar = await this.downloadFilestoreImage(
			// 			res.data.avatar);
			// 		// 头像太大
			// 		// #endif

			// 		if (i == 0) {
   //                      let  oback=res.data.mb_img1==""?res.data.avatar:res.data.mb_img1
			// 			let mb_img = await this.downloadFilestoreImage(
			// 			oback);
			// 			this.$nextTick(function() {
			// 				that.$util.minphaibao0(mb_img,erwm, res.data, xuexiao, emlice,
			// 					dinwei, box, phone,
			// 					this.wd, this.hg,i, (tempFilePath) => {
			// 						that.posterImage.push(tempFilePath)
			// 						// that.$set(that.posterImage, i, tempFilePath);
			// 						// console.log("是的发送到发斯蒂芬");
			// 						// console.log(tempFilePath);
			// 						// #ifdef MP
			// 						if (!that.posterImage.length) {
			// 							return that.$util.Tips({
			// 								title: '小程序二维码需要发布正式版后才能获取到'
			// 							});
			// 						}
			// 						// #endif
			// 					});
			// 			})
			// 		} else if (i == 1) {
   //                      let  oback=res.data.mb_img==""?res.data.avatar:res.data.mb_img
			// 			let mb_img = await this.downloadFilestoreImage(
			// 			oback);
			// 			this.$nextTick(function() {
			// 				that.$util.minphaibao1(mb_img,beijing, erwm, res.data, beijing, xuexiao,
			// 					emlice, dinwei,
			// 					box2, phone, this.wd, this.hg, i, (tempFilePath) => {
			// 						that.posterImage.push(tempFilePath)
			// 						// that.$set(that.posterImage, i, tempFilePath);
			// 						// console.log(tempFilePath);
			// 						// #ifdef MP
			// 						if (!that.posterImage.length) {
			// 							return that.$util.Tips({
			// 								title: '小程序二维码需要发布正式版后才能获取到'
			// 							});
			// 						}
			// 						// #endif
			// 					});
			// 			})
			// 		} else if (i == 2) {
			// 			this.$nextTick(function() {
			// 				that.$util.minphaibao2(beijing2, erwm, res.data, beijing2, xuexiao,
			// 					emlice, dinwei,
			// 					box2, phone, this.wd, this
			// 					.hg, i, avatar, (
			// 						tempFilePath) => {
			// 						that.posterImage.push(tempFilePath)
			// 						// that.$set(that.posterImage, i, tempFilePath);
			// 						// console.log(tempFilePath);
			// 						// #ifdef MP
			// 						if (!that.posterImage.length) {
			// 							return that.$util.Tips({
			// 								title: '小程序二维码需要发布正式版后才能获取到'
			// 							});
			// 						}
			// 						// #endif
			// 					});
			// 			})
			// 		}
			// 	}
			// 	uni.hideLoading();
			// },
			// #ifdef MP
			async routineCode() {
				let res = await routineCode()
				this.mpUrl = await this.downloadFilestoreImage(res.data.url);
			},
			// #endif
			async imgToBase(url) {
				let res = await imgToBase({
					image: url
				})
				return res.data.image
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			bindchange(e) {
				// console.log(e.detail.current, this.posterImage);
				let spreadList = this.spreadList;
				this.swiperIndex = e.detail.current;
			},
			savePoster(e){
				// var option={
				// 	//绘制海报内容
				// 	codeUrl: 'https://pic1.zhimg.com/80/v2-2714df42147132464a71af391ed04be4_720w.jpg', //小程序太阳码
				// 	// codeUrl: '/static/tym.jpg', //小程序太阳码
				// 	coverUrl: 'https://pic1.zhimg.com/80/v2-2714df42147132464a71af391ed04be4_720w.jpg', //题库图片
				// 	headUrl: 'https://pic1.zhimg.com/80/v2-b9df1fdfe67f2177d5c84af90dcadfc1_720w.jpg?source=1940ef5c', //头像
				// 	bgUrl: 'https://pic3.zhimg.com/v2-8fbde0f9ac6a19a23aa839e73394618a_b.jpg', //图片背景填充，和 fillStyle 只能传一个，bgUrl 优先级高于 fillStyle
				// 	fillStyle: '#0688ff', //纯色背景填充颜色
				// 	nickName: 'UNDEFINED', //授权登录的用户名
				// 	miniName: '答题考试助手', //小程序名称
				// 	tkName:'题库名称题库名称题库名称题库名称题库名称题库名称题库名称题库名称题库名称题库名称题库名称题库名称题库名称题库名称题库名称题库名称题库名称题库名称题库名称题库名称~~', //题库名称
				// 	tkAuthor:'题库作者题库作者题库作者题库作者题库作者题库作者题库作者题库作者题库作者题库作者题库作者题库作者题库作者题库作者题库作者题库作者题库作者题库作者题库作者题库作者题库作者题库作者题库作者题库作者', //题库作者
				// 	tkType: '考试', //题库类型
				// 	cost: '免费', //是否需要收费   免费/付费
				// 	isPub: '公开' //公开 还是 私有
				// }
				// this.$refs.draw.share_qrcode(option)
				
				// wx.canvasToTempFilePath({
				// 	x: 100,
				// 	y: 200,
				// 	width: 50,
				// 	height: 50,
				// 	destWidth: 100,
				// 	destHeight: 100,
				// 	canvasId: 'myCanvas0',
				// 	success(res) {
				// 		console.log(res,"res")
				// 		wx.saveImageToPhotosAlbum({
				// 		  filePath:res.tempFilePath,
				// 		  success(res1){
				// 			  console.log(res1);
						
				// 		  }
				// 		})
				// 	},
				// 	fail(err){
				// 		console.log(err,"err")
				// 	}
				// })
				// const that = this
				// let fileName = new Date().valueOf();
				// let filePath = wx.env.USER_DATA_PATH + '/' + fileName + '.jpg'	//这边就是为了安卓做的兼容，因为安卓机有可能会将图片地址的后缀名读取为：unknow
				// wx.downloadFile({
				//   url: "https://ask.dcloud.net.cn/static/images/side/ask_zp_1130.png", //需要保存的图片地址
				//   filePath: filePath,
				//   success: function (res) {
				// 	// 保存图片到系统相册
				// 	wx.saveImageToPhotosAlbum({
				// 	  filePath: filePath,
				// 	  success(data) {
				// 		let fileMgr = wx.getFileSystemManager()
				// 		fileMgr.unlink({
				// 		  filePath: filePath,
				// 		  success() {
				// 			wx.showToast({
				// 			  title: '已保存至您的相册',
				// 			  icon: 'none',
				// 			  duration: 1500
				// 			});
				// 		  }
				// 		})
				// 	  },
				// 	  fail(err) {
				// 		if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
				// 		  wx.showModal({
				// 			title: '提示',
				// 			content: '需要您授权保存相册',
				// 			showCancel: false,
				// 			success: modalSuccess => {
				// 			  wx.openSetting({
				// 				success(settingdata) {
				// 				  if (settingdata.authSetting['scope.writePhotosAlbum']) {
				// 					console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
				// 				  } else {
				// 					console.log('获取权限失败，给出不给权限就无法正常使用的提示')
				// 				  }
				// 				}
				// 			  })
				// 			}
				// 		  })
				// 		}
				// 	  }
				// 	})
				//   },
				//   fail: function (res) {}
				// })
			},
			// #ifdef MP
			savePosterPathMp(url) {
				console.log(url,"url")
				let that = this;
				uni.getSetting({
					success(res) {
						if (res.authSetting['scope.writePhotosAlbum']) {
							uni.saveImageToPhotosAlbum({
								filePath: url,
								success: function() {
									that.$util.Tips({
										title: '保存成功',
										icon: 'success'
									});
								},
								fail: function(err) {
									console.log(err,"err")
									that.$util.Tips({
										title: '保存失败',
										icon: 'error'
									});
								}
							});
						} else {
							   uni.authorize({
								   scope: 'scope.writePhotosAlbum',
								   success() {
									   // uni.getLocation()
								   }
							   })
							// wx.showModal({
							// 	title: '提示',
							// 	content: '需要您授权保存相册',
							// 	showCancel: false,
							// 	success() {
                                             
							// 		// wx.openSetting({
							// 		// 	success(settingdata) {
							// 		// 		if (settingdata.authSetting[
							// 		// 				'scope.writePhotosAlbum'
							// 		// 			]) {
							// 		// 			wx.showModal({
							// 		// 				title: '提示',
							// 		// 				content: '获取权限成功,再次保存图片即可成功',
							// 		// 				showCancel: false,
							// 		// 			})
							// 		// 		} else {
							// 		// 			wx.showModal({
							// 		// 				title: '提示',
							// 		// 				content: '获取权限失败，无法保存到相册',
							// 		// 				showCancel: false,
							// 		// 			})
							// 		// 		}

							// 		// 	},
							// 		// 	complete(comp) {
							// 		// 		console.log("complete", finishData)
							// 		// 	}
							// 		// })
							// 	}
							// })
						}
					},
					fail(err) {
						console.log(err, 'oooo');
					}
				})
				// uni.openSetting({
				// 	success(res) {

				// 	},
				// 	fail(err) {
				// 		console.log(err, 'oooo');
				// 	}
				// })
				// uni.getSetting({
				// 	success(res) {
				// 		if (!res.authSetting['scope.writePhotosAlbum']) {
				// 			console.log(res, 'pppop');
				// 			uni.authorize({
				// 				scope: 'scope.writePhotosAlbum',
				// 				success() {
				// 					uni.saveImageToPhotosAlbum({
				// 						filePath: url,
				// 						success: function(res) {
				// 							that.$util.Tips({
				// 								title: '保存成功',
				// 								icon: 'success'
				// 							});
				// 						},
				// 						fail: function(res) {
				// 							that.$util.Tips({
				// 								title: '保存失败'
				// 							});
				// 						}
				// 					});
				// 				},
				// 				fail() {

				// 				}
				// 			});
				// 		} else {
				// 			uni.saveImageToPhotosAlbum({
				// 				filePath: url,
				// 				success: function(res) {
				// 					that.$util.Tips({
				// 						title: '保存成功',
				// 						icon: 'success'
				// 					});
				// 				},
				// 				fail: function(res) {
				// 					that.$util.Tips({
				// 						title: '保存失败'
				// 					});
				// 				}
				// 			});
				// 		}
				// 	}
				// });

			},
			// #endif
			// #ifdef APP-PLUS
			savePosterPathMp(url) {
				let that = this;
				uni.saveImageToPhotosAlbum({
					filePath: url,
					success: function(res) {
						that.$util.Tips({
							title: '保存成功',
							icon: 'success'
						});
					},
					fail: function(res) {
						that.$util.Tips({
							title: '保存失败'
						});
					}
				});
			},
			// #endif
			//图片转符合安全域名路径
			downloadFilestoreImage(url) {
				return new Promise((resolve, reject) => {
					let that = this;
					uni.downloadFile({
						url: url,
						success: function(res) {
							resolve(res.tempFilePath);
						},
						fail: function() {
							return that.$util.Tips({
								title: ''
							});
						}
					});
				})
			},
			setShareInfoStatus: function() {
				if (this.$wechat.isWeixin()) {
					if (this.isLogin) {
						getUserInfo().then(res => {
							let configAppMessage = {
								desc: '分销海报',
								title: res.data.nickname + '-分销海报',
								link: '/pages/index/index?spread=' + res.data.uid,
								imgUrl: this.spreadList[0]
							};
							this.$wechat.wechatEvevt(["updateAppMessageShareData",
									"updateTimelineShareData"
								],
								configAppMessage)
						});
					} else {
						toLogin();
					}

				}
			},
			userSpreadBannerList: function() {
				let that = this;
				uni.showLoading({
					title: '获取中',
					mask: true,
				})
				spreadBanner().then(res => {
					uni.hideLoading();
					that.$set(that, 'spreadList', res.data);
					that.$set(that, 'poster', res.data[0].poster);
					// #ifdef H5
					that.setShareInfoStatus();
					// #endif
				}).catch(err => {
					uni.hideLoading();
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		// background-color: #B2A786 !important;
	}
	.page{
		// padding-bottom: 50rpx;
		// height: 100vh;
	}
	.title {
		padding: 20rpx 30px;
		padding-bottom: 10rpx;

		h3 {
			text-align: center;
			font-family: DOUYU Font DOUYU Font;
			font-weight: 600;
			font-size: 16px;
			line-height: 22px;
			font-style: oblique;
			color: #fff;
		}

		p {
			text-align: center;
			font-family: Circular Std Book Italic;
			font-weight: 400;
			font-size: 12px;
			line-height: 22px;
			font-style: oblique;
			color: #fff;
		}
	}
	// 底部保持海报
	.odiv {
		margin-top: 40rpx;
		text-align: center;

		image {
			width: 48rpx;
			height: 48rpx;
		}

		view {
			color: #fff;
		}
	}
	// .canvas {
	// 	width: 100%;
	// }
	.box {
		width: 95%;
		height: 100%;
		position: relative;
		overflow: hidden;
		padding: 200rpx 100rpx;
		& > image{
			position: absolute;
			top: 0;
			left: 0;
			width:100%;
			height: 100%;
		}
		.text{
			position: relative;
			& > view:nth-of-type(1){
				font-size: 40rpx;
				color: #7F724C;
				font-weight: 500;
				font-family: PingFang SC;
			}
			& > view:nth-of-type(2){
				font-size: 20rpx;
				color: #A49C87;
				margin-top: 10rpx;
			}
		}
		.telList{
			position: relative;
			color: #A49C87;
			font-size: 24rpx;
			margin:50rpx 0 50rpx 0;
			view{
				display: flex;
				align-items: center;
				margin: 20rpx 0;
			}
			image{
				width: 16rpx;
				height: 24rpx;
				vertical-align: middle;
			}
			span{
				margin-left: 15rpx;
			}
			view:nth-of-type(2) image{
				width: 18rpx;
				height: 18rpx;
			}
			view:nth-of-type(3) image{
				width: 18rpx;
				height: 20rpx;
			}
			view:nth-of-type(4) image{
				width: 18rpx;
				height: 16rpx;
			}
		}
		.msg{
			position: absolute;
			font-size: 30rpx;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			width: 80%;
			image{
				width: 160rpx;
				height: 160rpx;
				margin: 30rpx 0 10rpx 0;
				border-radius: 50%;
			}
			view{
				width: 100%;
				text-align: center;
			}
			view:nth-of-type(1){
				color: #7F724C;
				font-size: 22rpx;
			}
			view:nth-of-type(2){
				font-size: 26rpx;
				margin-bottom: 30rpx;
			}
		}
	}


	.box_2{
		width: 95%;
		height: 100%;
		position: relative;
		overflow: hidden;
		padding: 200rpx 50rpx;
		color: white;
		& > image:nth-of-type(1){
			position: absolute;
			top: 0;
			left: 0;
			width:100%;
			height: 100%;
		}
		& > image:nth-of-type(2){
			width: 60%;
			height: 60%;
			position: absolute;
			right: 0;
			top: -10rpx;
		}
		& > image:nth-of-type(3){
			width: 100%;
			height: 100%;
			position: absolute;
			right: 0;
			bottom:0;
		}
		.text{
			position: relative;
			& > view:nth-of-type(1){
				font-size: 40rpx;
				font-weight: 500;
				font-family: PingFang SC;
			}
			& > view:nth-of-type(2){
				font-size: 20rpx;
				margin-top: 10rpx;
			}
		}
		.telList{
			position: relative;
			font-size: 24rpx;
			margin:50rpx 0 50rpx 0;
			view{
				display: flex;
				align-items: center;
				margin: 20rpx 0;
			}
			image{
				width: 16rpx;
				height: 24rpx;
				vertical-align: middle;
			}
			span{
				margin-left: 15rpx;
			}
			view:nth-of-type(2) image{
				width: 20rpx;
				height: 22rpx;
			}
			view:nth-of-type(3) image{
				width: 20rpx;
				height: 18rpx;
			}
			view:nth-of-type(4) image{
				width: 18rpx;
				height: 16rpx;
			}
		}
		.msg{
			position: absolute;
			font-size: 30rpx;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			width: 80%;
			image{
				width: 160rpx;
				height: 160rpx;
				margin: 30rpx 0 10rpx 0;
				border-radius: 50%;
			}
			view{
				width: 100%;
				text-align: center;
			}
			view:nth-of-type(1){
				font-size: 22rpx;
			}
			view:nth-of-type(2){
				font-size: 26rpx;
				margin-bottom: 30rpx;
			}
		}
	}
	.img-list {
		margin-right: 40px;
	}
	.distribution-posters{
		// background-color: #B2A786;
	}
	.distribution-posters swiper {
		width: 100%;
		height: 1100rpx;
		position: relative;
		// margin-top: 40rpx;
	}

	.distribution-posters .slide-image {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		border-radius: 15rpx;
	}

	.active {
		// transform: none;
		transition: all 0.2s ease-in 0s;
	}

	.quiet {
		transform: scale(0.8333333);
		transition: all 0.2s ease-in 0s;
	}

	.distribution-posters .keep {
		font-size: 30rpx;
		width: 600rpx;
		height: 80rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 38rpx auto;
	}

	.distribution-posters .preserve {
		color: #fff;
		text-align: center;
		margin-top: 38rpx;
	}

	.distribution-posters .preserve .line {
		width: 100rpx;
		height: 1px;
		background-color: #fff;
	}

	.distribution-posters .preserve .tip {
		margin: 0 30rpx;
	}
</style>
